// 职责是封装.vue文件上的js逻辑
import { ref } from 'vue'
import { getParkInfoAPI } from '@/api/bigscreen'

// 1. 请求服务器数据并渲染2d图标的4个数据
// 1.1 定义响应式数据
// 最终的结构：{base:{},parkIncome:{},parkIndustry:[]}
// base:园区概况
// parkIncome:园区收入
// parkIndustry:园区产业分布
const parkInfo = ref({})

// 1.2 请求服务器数据赋值给响应式数据
const getParkInfo = async () => {
    const res = await getParkInfoAPI()
    parkInfo.value = res.data
}


import * as echarts from 'echarts'//导入echarts插件

// 2. 封装系列成员完成园区收入柱状图的渲染
// 2.1作用是用来获取echars渲染容器的dom元素的
const barChart = ref(null)

// 2.2职责：负责获取parkInfo.parkIncome数据，调用echart的API，完成柱状图的渲染
const initBarChart = () => {
    // 1. 解构出parkIncome数据
    const { parkIncome } = parkInfo.value

    // 2. 准备echarts的参数
    const barOptions = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            // 让图表占满容器
            top: '10px',
            left: '0px',
            right: '0px',
            bottom: '0px',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true,
                    show: false,
                },
                data: parkIncome.xMonth,
            },
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '园区年度收入',
                type: 'bar',
                barWidth: '10px',
                data: parkIncome.yIncome.map((item, index) => {
                    const color =
                        index % 2 === 0
                            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.23, color: '#74c0f8' },
                                { offset: 1, color: 'rgba(116,192,248,0.00)' },
                            ])
                            : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.23, color: '#ff7152' },
                                { offset: 1, color: 'rgba(255,113,82,0.00)' },
                            ])
                    return { value: item, itemStyle: { color } }
                }),
            },
        ],
        textStyle: {
            color: '#B4C0CC',
        },
    }
    // 3. setOption方法完成渲染
    const myBarChart = echarts.init(barChart.value)
    myBarChart.setOption(barOptions)
}

// 3.渲染园区产业分布图表
// 3.1 准备dom元素
const pieChart = ref(null)
// 3.2 负责获取parkInfo.parkIndustry数据，调用echart的API，完成柱状图的渲染
const initPieChart = () => {
    const { parkIndustry } = parkInfo.value
    const pieOption = {
        color: [
            '#00B2FF', '#2CF2FF', '#892CFF', '#FF624D', '#FFCF54', '#86ECA2'],
        legend: {
            itemGap: 20,
            bottom: '0',
            icon: 'rect',
            itemHeight: 10, // 图例icon高度
            itemWidth: 10, // 图例icon宽度
            textStyle: {
                color: '#c6d1db',
            },
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '园区产业分析',
                type: 'pie',
                radius: ['55%', '60%'], // 设置内圈与外圈的半径使其呈现为环形
                center: ['50%', '40%'], // 圆心位置， 用于调整整个图的位置
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        return `${params.seriesName}</br><div style='display:flex;justify-content: space-between;'><div>${params.marker}${params.name}</div><div>${params.percent}%</div></div>`
                    }
                },
                label: {
                    show: false,
                    position: 'center',
                },
                data: parkIndustry,
            },
        ],

    }
    const myPieChart = echarts.init(pieChart.value)
    myPieChart.setOption(pieOption)
}

//4.渲染3D模型
// 导入模型解析构造函数
import { Application } from '@splinetool/runtime'

// 初始化3d模型
const publisPath = 'https://fe-hmzs.itheima.net'
const ref3d = ref(null)
const showLoading = ref(false)
const init3dModel = () => {
    // 开启loading 
    showLoading.value = true
    // 1. 实例解析器对象(传入模型将来渲染的节点对象)
    const spline = new Application(ref3d.value)
    // 2. 使用对象load方法去拉取3大模型资源
    spline.load(`${publisPath}/scene.splinecode`).then(() => {
        showLoading.value = false
        // 模型渲染完毕之后后续的逻辑操作
        // 3. 拉取资源之后.then方法中可以做后续的逻辑操作
    })
}



// end:导出给.vue文件使用
export function useBigScreenMember() {
    return {
        parkInfo,//园区总览数据
        getParkInfo,//请求园区总览数据的方法
        barChart,//渲染柱状图的dom元素
        initBarChart,//柱状图的渲染方法
        pieChart,//渲染饼图的dom元素
        initPieChart,//饼图的渲染方法
        ref3d,//渲染3D模型的dom元素
        init3dModel,//3D模型的渲染方法
        showLoading,//loading的显示隐藏
    }
}
